<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-row :gutter="8">
      <a-col :span="12">
        <a-card>
          <a-form ref="actProcessFormQueryRef" :model="actProcessFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
            <a-row :gutter="16" v-show="!actProcessFormQueryVisible">
              <a-col :span="8">
                <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
                  <a-input-search v-model:value="actProcessFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="actProcessFormQuerySubmitting" @search="actProcessFormQuerySearch" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
                  <Dict v-model="actProcessFormQueryModel.processType" dictKey="processTypeSearch" formItemName="processType" @change="actProcessProcessTypeDictSelectChange" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="actProcessFormQueryUpDown">
                  展开
                  <CoreIcon icon="akar-icons:chevron-down" :size="14" />
                </a-button>
              </a-col>
            </a-row>
            <a-row :gutter="16" v-show="actProcessFormQueryVisible">
              <a-col :span="8">
                <a-form-item>
                  <a-input-search v-model:value="actProcessFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="actProcessFormQuerySubmitting" @search="actProcessFormQuerySearch" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item>
                  <Dict v-model="actProcessFormQueryModel.processType" dictKey="processTypeSearch" formItemName="processType" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
              </a-col>
              <a-col :span="8">
                <a-form-item label="流程标识">
                  <a-input v-model:value="actProcessFormQueryModel.processKeyAndLike" placeholder="输入流程标识" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="流程名称">
                  <a-input v-model:value="actProcessFormQueryModel.processNameAndLike" placeholder="输入流程名称" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-space :style="{ ...coreStyle.floatRight }">
                  <a-button @click="actProcessFormQueryReset">
                    <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                    重置
                  </a-button>
                  <a-button type="primary" ghost :loading="actProcessFormQuerySubmitting" @click="actProcessFormQuerySearch">
                    <CoreIcon icon="ant-design:search-outlined" :size="14" />
                    查询
                  </a-button>
                  <a-button type="link" @click="actProcessFormQueryUpDown">
                    收起
                    <CoreIcon icon="akar-icons:chevron-up" :size="14" />
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
          <a-space>
            <a-button type="primary" ghost @click="actProcessAdd">
              <CoreIcon icon="carbon:add-alt" :size="14" />
              新增
            </a-button>
            <a-button type="dashed" @click="actProcessUpdate" v-if="actProcessListSelectLength === 1">
              <CoreIcon icon="ri:brush-line" :size="14" />
              修改
            </a-button>
            <a-popconfirm title="确认删除？" placement="bottom" @confirm="actProcessDelete" v-if="actProcessListSelectLength > 0">
              <a-button type="dashed" danger>
                <CoreIcon icon="jam:delete" :size="14" />
                删除
              </a-button>
            </a-popconfirm>
            <a-button @click="actProcessDetailInfo" v-if="actProcessListSelectLength === 1">
              <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
              详情
            </a-button>
            <a-button type="dashed" @click="actProcessUpdate" v-if="actProcessListSelectLength === 1">
              <CoreIcon icon="fluent:my-location-20-regular" :size="14" />
              设为默认流程
            </a-button>
          </a-space>
          <a-space :style="{ ...coreStyle.floatRight }">
            <a-button type="link" shape="circle" @click="actProcessListGetDataSet">
              <CoreIcon icon="ci:refresh" :size="22" />
            </a-button>
          </a-space>
          <a-table
            rowKey="id"
            :columns="actProcessListColumns"
            :data-source="actProcessListDataSet"
            :loading="actProcessListLoading"
            :pagination="false"
            bordered
            :customRow="actProcessListCustomRow"
            :row-selection="{ fixed: true, selectedRowKeys: actProcessListSelectedRowKeys, onChange: actProcessListRowOnChange }"
            :scroll="{ x: '100%', y: 550 }"
            :style="{ ...coreStyle.marginTop(10) }"
          >
            <template #processTypeData="{ text }">
              <span>
                <a-tag color="purple" :style="{ 'line-height': '19px' }">{{ coreToolStore.getDictDisplayName('processType', text) }}</a-tag>
              </span>
            </template>
          </a-table>
          <a-pagination
            v-model:current="actProcessListDataPage"
            v-model:pageSize="actProcessListDataRows"
            :total="actProcessListDataCount"
            show-size-changer
            show-quick-jumper
            :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
            :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
            :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
            @change="actProcessListPaginationChange"
            @showSizeChange="actProcessListPaginationShowSizeChange"
            v-if="actProcessListPaginationVisible"
          >
          </a-pagination>
          <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!actProcessListPaginationVisible">
            {{ coreStyle.antdPaginationShowTotal(actProcessListDataCount) }}
          </p>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-space :style="{ ...coreStyle.marginTop(42) }">
            <a-button type="primary" ghost :disabled="!actProcessListSelectCurrentRowData.id" @click="actProcessChartAdd">
              <CoreIcon icon="carbon:add-alt" :size="14" />
              新增
            </a-button>
            <a-button type="dashed" @click="actProcessChartUpdate" v-if="actProcessChartListSelectLength === 1">
              <CoreIcon icon="ri:brush-line" :size="14" />
              修改
            </a-button>
            <a-popconfirm title="确认删除？" placement="bottom" @confirm="actProcessChartDelete" v-if="actProcessChartListSelectLength > 0">
              <a-button type="dashed" danger>
                <CoreIcon icon="jam:delete" :size="14" />
                删除
              </a-button>
            </a-popconfirm>
            <a-button @click="actProcessChartDetailInfo" v-if="actProcessChartListSelectLength === 1">
              <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
              详情
            </a-button>
            <a-button type="dashed" @click="actProcessChartChangeDefaultProcess" v-if="actProcessChartListSelectLength === 1">
              <CoreIcon icon="fluent:my-location-20-regular" :size="14" />
              设为默认流程
            </a-button>
          </a-space>
          <a-space :style="{ ...coreStyle.floatRight, ...coreStyle.marginTop(42) }">
            <a-button type="link" shape="circle" @click="actProcessChartFormQuerySearch">
              <CoreIcon icon="ci:refresh" :size="22" />
            </a-button>
          </a-space>
          <a-table
            rowKey="id"
            :columns="actProcessChartListColumns"
            :data-source="actProcessChartListDataSet"
            :loading="actProcessChartListLoading"
            :pagination="false"
            bordered
            :customRow="actProcessChartListCustomRow"
            :row-selection="{ fixed: true, selectedRowKeys: actProcessChartListSelectedRowKeys, onChange: actProcessChartListRowOnChange }"
            :scroll="{ x: '100%', y: 550 }"
            :style="{ ...coreStyle.marginTop(10) }"
          >
          </a-table>
          <a-pagination
            v-model:current="actProcessChartListDataPage"
            v-model:pageSize="actProcessChartListDataRows"
            :total="actProcessChartListDataCount"
            show-size-changer
            show-quick-jumper
            :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
            :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
            :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
            @change="actProcessChartListPaginationChange"
            @showSizeChange="actProcessChartListPaginationShowSizeChange"
            v-if="actProcessChartListPaginationVisible"
          >
          </a-pagination>
          <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!actProcessChartListPaginationVisible">
            {{ coreStyle.antdPaginationShowTotal(actProcessChartListDataCount) }}
          </p>
        </a-card>
      </a-col>
    </a-row>
    <a-drawer
      v-model:visible="actProcessEditDrawerVisible"
      title="编辑流程信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="actProcessEditDrawerOnClose"
    >
      <a-form ref="actProcessFormRef" :model="actProcessFormModel" :rules="actProcessFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="流程名称" name="processName">
              <a-input v-model:value="actProcessFormModel.processName" placeholder="输入流程名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程标识 (最多20个英文字符，不能重复)" name="processKey">
              <a-input v-model:value="actProcessFormModel.processKey" placeholder="输入流程标识" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- <a-form-item label="流程类型" name="processType">
              <a-input v-model:value="actProcessFormModel.processType" placeholder="输入流程类型" />
            </a-form-item> -->
            <Dict v-model="actProcessFormModel.processType" dictKey="processType" formItemName="processType" />
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="actProcessFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-item label="默认流程版本" name="defaultProcessVersions">
              <a-input-number v-model:value="actProcessFormModel.defaultProcessVersions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col> -->
          <a-col :span="24">
            <a-form-item label="描述" name="description">
              <a-textarea v-model:value="actProcessFormModel.description" :rows="3" placeholder="输入描述" />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-item label="版本号" name="versions">
              <a-input-number v-model:value="actProcessFormModel.versions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col> -->
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="actProcessFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="actProcessFormSaveSubmitting" @click="actProcessFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="actProcessFormSaveSubmitting" @click="actProcessFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="actProcessDetailDrawerVisible"
      title="流程详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="流程标识" :span="1">{{ actProcessDetailModel.processKey }}</a-descriptions-item>
          <a-descriptions-item label="流程名称" :span="1">{{ actProcessDetailModel.processName }}</a-descriptions-item>
          <a-descriptions-item label="流程类型" :span="1">{{ coreToolStore.getDictDisplayName('processType', actProcessDetailModel.processType) }}</a-descriptions-item>
          <a-descriptions-item label="默认流程版本" :span="1">{{ actProcessDetailModel.defaultProcessVersions }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="2">{{ actProcessDetailModel.weightOrder }}</a-descriptions-item>
          <a-descriptions-item label="描述" :span="2">{{ actProcessDetailModel.description }}</a-descriptions-item>
          <!-- <a-descriptions-item label="版本号" :span="1">{{ actProcessDetailModel.versions }}</a-descriptions-item> -->
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="actProcessDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="actProcessChartEditDrawerVisible"
      title="编辑流程图信息"
      placement="right"
      :closable="false"
      :width="'85%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(55, 0, 53, 0), ...coreStyle.paddingSame(0) }"
      @close="actProcessChartEditDrawerOnClose"
    >
      <a-tabs v-model:activeKey="actProcessChartEditDrawerTabsActiveKey" @change="actProcessChartEditDrawerTabsChange" :tabBarStyle="{ ...coreStyle.marginBottom(0) }">
        <a-tab-pane key="processEditor" tab="流程图编辑器"></a-tab-pane>
        <a-tab-pane key="xmlEditor" tab="xml文件编辑器"></a-tab-pane>
        <template #renderTabBar="{ DefaultTabBar, ...props }">
          <component
            :is="DefaultTabBar"
            v-bind="props"
            :style="{ zIndex: 1, background: '#fff', textAlign: 'center' }"
          />
        </template>
      </a-tabs>
      <div :style="{ 'height': actProcessEditorHeight }">
        <ActProcessEditor ref="actProcessEditorRef" :xmlStr="actProcessChartXmlStr" v-if="actProcessEditorVisible" />
        <CodeEditor ref="actXmlCodeEditorRef" langType="xml" :docStr="actXmlStr" :height="actProcessEditorHeight" v-if="actXmlEditorVisible" />
      </div>
      <a-drawer
        v-model:visible="actProcessChartEditStaffPostNexusDrawerVisible"
        title="关联员工或岗位"
        placement="right"
        :closable="false"
        :width="'30%'"
        :header-style="{ ...coreStyle.antdDrawerHeader }"
        :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
        @close="actProcessChartEditStaffPostNexusDrawerOnClose"
      >
        <a-row>
          <a-col :span="24" :style="{ ...coreStyle.textAlignCenter }">
            <a-radio-group v-model:value="actProcessChartEditStaffPostNexusValue" @change="actProcessChartEditStaffPostNexusChange">
              <a-radio-button value="staffNexus">关联员工</a-radio-button>
              <a-radio-button value="postNexus">关联岗位</a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="24">
            <a-card :bordered="false" :bodyStyle="{ border: '1px dashed #0000000f' }" :style="{ ...coreStyle.marginTop(10) }">
              <a-row>
                <a-col :span="4">
                </a-col>
                <a-col :span="20">
                  <div :style="{ 'height': actProcessChartEditStaffPostNexusDrawerHeight }">
                    <ScrollContainer>
                      <a-tree v-model:selectedKeys="actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData" :tree-data="actProcessChartEditStaffPostNexusOrgPostTreeData" multiple defaultExpandAll v-if="actProcessChartEditStaffPostNexusOrgPostTreeData.length">
                      </a-tree>
                      <a-tree v-model:selectedKeys="actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData" :tree-data="actProcessChartEditStaffPostNexusOrgPostStaffTreeData" multiple defaultExpandAll v-if="actProcessChartEditStaffPostNexusOrgPostStaffTreeData.length">
                      </a-tree>
                    </ScrollContainer>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <div :style="{ ...coreStyle.antdDrawerFooter }">
          <a-space>
            <a-button type="primary" ghost :loading="actProcessChartEditStaffPostNexusSubmitting" @click="actProcessChartEditStaffPostNexusClick">
              <CoreIcon icon="ant-design:save-outlined" :size="14" />
              确定
            </a-button>
          </a-space>
        </div>
      </a-drawer>
      <!-- <a-form ref="actProcessChartFormRef" :model="actProcessChartFormModel" :rules="actProcessChartFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="流程版本" name="processVersions">
              <a-input-number v-model:value="actProcessChartFormModel.processVersions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程图名称" name="processChartName">
              <a-input v-model:value="actProcessChartFormModel.processChartName" placeholder="输入流程图名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="部署Id" name="deploymentId">
              <a-input v-model:value="actProcessChartFormModel.deploymentId" placeholder="输入部署Id" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程定义Id" name="processDefinitionId">
              <a-input v-model:value="actProcessChartFormModel.processDefinitionId" placeholder="输入流程定义Id" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程图内容" name="processChartContent">
              <a-input v-model:value="actProcessChartFormModel.processChartContent" placeholder="输入流程图内容" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="外键Id" name="fkid">
              <a-input v-model:value="actProcessChartFormModel.fkid" placeholder="输入外键Id" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form> -->
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <!-- <a-button @click="actProcessChartFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="actProcessChartFormSaveSubmitting" @click="actProcessChartFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button> -->
          <a-button type="primary" ghost :loading="actProcessChartFormSaveSubmitting" @click="actProcessChartFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="actProcessChartDetailDrawerVisible"
      title="流程图详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 0, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="流程图名称" :span="1">{{ actProcessChartDetailModel.processChartName }}</a-descriptions-item>
          <a-descriptions-item label="流程版本" :span="1">{{ actProcessChartDetailModel.processVersions }}</a-descriptions-item>
          <a-descriptions-item label="部署Id" :span="2">{{ actProcessChartDetailModel.deploymentId }}</a-descriptions-item>
          <a-descriptions-item label="流程定义Id" :span="2">{{ actProcessChartDetailModel.processDefinitionId }}</a-descriptions-item>
          <!-- <a-descriptions-item label="流程图内容" :span="2">{{ actProcessChartDetailModel.processChartContent }}</a-descriptions-item> -->
          <!-- <a-descriptions-item label="外键Id" :span="1">{{ actProcessChartDetailModel.fkid }}</a-descriptions-item> -->
        </a-descriptions>
      </a-space>
      <!-- <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="actProcessChartDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div> -->
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'
import type { CoreTree } from '/@/tool/CoreTree'

import { useActProcessStore } from '/@/store/modules/cn/core/act/actProcessStore'

import type { ActProcess } from '/@/model/cn/core/act/eo/ActProcess'
import { toActProcess } from '/@/model/cn/core/act/eo/ActProcess'

import type { ActProcessQO } from '/@/model/cn/core/act/qo/ActProcessQO'
import { toActProcessQO } from '/@/model/cn/core/act/qo/ActProcessQO'

import type { ActProcessVO } from '/@/model/cn/core/act/vo/ActProcessVO'
import { toActProcessVO } from '/@/model/cn/core/act/vo/ActProcessVO'

import { useActProcessChartStore } from '/@/store/modules/cn/core/act/actProcessChartStore'

import type { ActProcessChart } from '/@/model/cn/core/act/eo/ActProcessChart'
import { toActProcessChart } from '/@/model/cn/core/act/eo/ActProcessChart'

import type { ActProcessChartQO } from '/@/model/cn/core/act/qo/ActProcessChartQO'
import { toActProcessChartQO } from '/@/model/cn/core/act/qo/ActProcessChartQO'

import type { ActProcessChartVO } from '/@/model/cn/core/act/vo/ActProcessChartVO'
import { toActProcessChartVO } from '/@/model/cn/core/act/vo/ActProcessChartVO'

import { useActProcessNodeStore } from '/@/store/modules/cn/core/act/actProcessNodeStore'
import { useActProcessNodeDataStore } from '/@/store/modules/cn/core/act/actProcessNodeDataStore'

import { ScrollContainer } from '/@/components/Container/index'

import { useOrgStore } from '/@/store/modules/cn/core/sign/orgStore'

import type { OrgQO } from '/@/model/cn/core/sign/qo/OrgQO'

@Options({
  name: 'CoreWorkflow',
  components: {
    ScrollContainer,
  },
  computed: {
    ...mapStores(useCoreToolStore, useActProcessStore, useActProcessChartStore, useActProcessNodeStore, useActProcessNodeDataStore, useOrgStore),
  },
})
export default class CoreWorkflow extends Vue {

  actProcessListDataSet: Array<ActProcessVO> = []

  actProcessListColumns: Array<object> = [
    {
      title: '流程标识',
      dataIndex: 'processKey',
      align: 'center',
      ellipsis: true,
      // width: 200,
    },
    {
      title: '流程名称',
      dataIndex: 'processName',
      align: 'center',
      ellipsis: true,
      // width: 200,
    },
    {
      title: '流程类型',
      dataIndex: 'processType',
      align: 'center',
      slots: { customRender: 'processTypeData' },
      // ellipsis: true,
      width: 100,
    },
    {
      title: '默认流程版本',
      dataIndex: 'defaultProcessVersions',
      align: 'center',
      // ellipsis: true,
      width: 120,
    },
    // {
    //   title: '描述',
    //   dataIndex: 'description',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      width: 100,
    },
    // {
    //   title: '版本号',
    //   dataIndex: 'versions',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
  ]

  actProcessListLoading: boolean = false

  actProcessListSelectedRowKeys: string[] = []

  actProcessListSelectData: Array<ActProcessVO> = []

  actProcessListSelectLength: number = 0

  actProcessListSelectCurrentRowIndex: number = -1

  actProcessListSelectCurrentRowData: ActProcessVO = toActProcessVO()

  actProcessListPaginationVisible: boolean = true

  actProcessListDataPage: number = 1

  actProcessListDataRows: number = 10

  actProcessListDataCount: number = 0

  actProcessListRowOnChange(selectedRowKeys, selectedRows) {
    this.actProcessListSelectedRowKeys = [ ...selectedRowKeys ]
    this.actProcessListSelectData = [ ...selectedRows ]
    this.actProcessListSelectLength = selectedRows.length
  }

  actProcessListCustomRow(record, index) {
    return {
      'class': index === this.actProcessListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.actProcessListSelectCurrentRowIndex = index
        this.actProcessListSelectCurrentRowData = { ...record }
        this.actProcessChartFormQueryModel.fkid = this.actProcessListSelectCurrentRowData.id
        this.actProcessChartFormQuerySearch()
        // let selectedRowKeys = [ ...this.actProcessListSelectedRowKeys ]
        // let selectedRows = [ ...this.actProcessListSelectData ]
        // if (selectedRowKeys.includes(record.id)) {
        //   this.actProcessListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        // } else {
        //   selectedRowKeys.push(record.id)
        //   selectedRows.push(record)
        //   this.actProcessListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        // }
      },
      onDblclick: (event) => {
        this.actProcessStore.pkVo(this.$toParam<ActProcessQO>({ id: this.actProcessListSelectCurrentRowData.id } as ActProcessQO)).then((res: Res<ActProcessVO>) => {
          if (res.succ) {
            this.actProcessDetailModel = { ...res.data[0] }
            this.actProcessDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  actProcessListGetDataSet() {
    this.actProcessListLoading = true
    this.actProcessListRowOnChange([], [])
    this.actProcessListSelectCurrentRowIndex = -1
    this.actProcessListSelectCurrentRowData = toActProcessVO()
    this.actProcessStore.pagingVo(this.$toParam<ActProcessQO>({ weightOrderAsc: 'y' } as ActProcessQO, this.actProcessListDataPage, this.actProcessListDataRows)).then((res: Res<ActProcessVO>) => {
      if (res.succ) {
        this.actProcessListPaginationVisible = true
        this.actProcessListDataSet = [ ...res.data ]
        this.actProcessListDataCount = res.count
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessListLoading = false }, 500)
    })
    this.actProcessChartFormQuerySearch()
  }

  actProcessListPaginationChange() {
    this.actProcessListGetDataSet()
  }

  actProcessListPaginationShowSizeChange() {
    this.actProcessListGetDataSet()
  }

  actProcessFormQueryVisible: boolean = false

  actProcessFormQuerySubmitting: boolean = false

  actProcessFormQueryModel: ActProcessQO = toActProcessQO()

  actProcessFormQueryUpDown() {
    this.actProcessFormQueryVisible = !this.actProcessFormQueryVisible
  }

  actProcessFormQueryReset() {
    if (this.$refs.actProcessFormQueryRef) {
      this.$refs.actProcessFormQueryRef.resetFields()
      this.actProcessFormQueryModel = toActProcessQO()
    }
  }

  actProcessFormQuerySearch() {
    this.actProcessFormQuerySubmitting = true
    this.actProcessListLoading = true
    this.actProcessListRowOnChange([], [])
    this.actProcessListSelectCurrentRowIndex = -1
    this.actProcessListSelectCurrentRowData = toActProcessVO()
    this.actProcessStore.queryVo(this.$toParam<ActProcessQO>(this.$toSearch({ ...this.actProcessFormQueryModel }))).then((res: Res<ActProcessVO>) => {
      if (res.succ) {
        this.actProcessListPaginationVisible = false
        this.actProcessListDataSet = [ ...res.data ]
        this.actProcessListDataCount = res.count
        setTimeout(() => { this.actProcessFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.actProcessListLoading = false }, 500)
    })
    this.actProcessChartFormQuerySearch()
  }

  actProcessProcessTypeDictSelectChange(value) {
    this.actProcessFormQuerySearch()
  }

  actProcessEditDrawerVisible: boolean = false

  actProcessFormSaveSubmitting: boolean = false

  actProcessFormSaveContinue: boolean = false

  actProcessFormModel: ActProcess = toActProcess()

  actProcessFormRules: object = {
    processKey: [
      { type: 'string', required: true, message: '流程标识不能为空！', trigger: ['change', 'blur'] },
    ],
    processName: [
      { type: 'string', required: true, message: '流程名称不能为空！', trigger: ['change', 'blur'] },
    ],
    processType: [
      { type: 'string', required: true, message: '流程类型不能为空！', trigger: ['change', 'blur'] },
    ],
    // defaultProcessVersions: [
    //   { type: 'number', required: true, message: '默认流程版本不能为空！', trigger: ['change', 'blur'] },
    // ],
    // description: [
    //   { type: 'string', required: true, message: '描述不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
    // versions: [
    //   { type: 'number', required: true, message: '版本号不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  actProcessFormReset() {
    if (this.$refs.actProcessFormRef) {
      this.$refs.actProcessFormRef.resetFields()
      this.actProcessFormModel = toActProcess()
    }
  }

  actProcessFormSubmit() {
    this.actProcessFormSaveSubmitting = true
    this.$refs.actProcessFormRef.validate().then(() => {
      if (this.actProcessFormModel.id) {
        this.actProcessStore.update(this.$toParam<ActProcess>(this.actProcessFormModel)).then((res: Res<ActProcess>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.actProcessFormReset()
            this.actProcessFormSaveSubmitting = false
            if (!this.actProcessFormSaveContinue) {
              this.actProcessEditDrawerVisible = false
              this.actProcessListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.actProcessStore.save(this.$toParam<ActProcess>(this.actProcessFormModel)).then((res: Res<ActProcess>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.actProcessFormReset()
            this.actProcessFormSaveSubmitting = false
            if (!this.actProcessFormSaveContinue) {
              this.actProcessEditDrawerVisible = false
              this.actProcessListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.actProcessFormSaveSubmitting = false }, 3000)
    })
  }

  actProcessFormSave() {
    this.actProcessFormSaveContinue = false
    this.actProcessFormSubmit()
  }

  actProcessFormNextAdd() {
    this.actProcessFormSaveContinue = true
    this.actProcessFormSubmit()
  }

  actProcessAdd() {
    if (this.actProcessFormModel.id) {
      this.actProcessFormReset()
    }
    this.actProcessEditDrawerVisible = true
  }

  actProcessUpdate() {
    this.actProcessStore.pk(this.$toParam<ActProcessQO>({ id: this.actProcessListSelectData[0].id } as ActProcessQO)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.actProcessFormReset()
        this.actProcessFormModel = { ...res.data[0] }
        this.actProcessEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessEditDrawerOnClose() {
    if (this.actProcessFormSaveContinue) {
      this.actProcessFormSaveContinue = false
      this.actProcessListGetDataSet()
    }
  }

  actProcessDelete() {
    let param: Array<ActProcess> = []
    this.actProcessListSelectData.forEach((eo: ActProcessVO) => {
      param.push({ id: eo.id } as ActProcess)
    })
    this.actProcessStore.removeBatch(this.$toParam<ActProcess>(param)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.actProcessListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessDetailDrawerVisible: boolean = false

  actProcessDetailModel: ActProcessVO = toActProcessVO()

  actProcessDetailInfo() {
    this.actProcessStore.pkVo(this.$toParam<ActProcessQO>({ id: this.actProcessListSelectData[0].id } as ActProcessQO)).then((res: Res<ActProcessVO>) => {
      if (res.succ) {
        this.actProcessDetailModel = { ...res.data[0] }
        this.actProcessDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessDetailUpdate() {
    this.actProcessStore.pk(this.$toParam<ActProcessQO>({ id: this.actProcessDetailModel.id } as ActProcessQO)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.actProcessFormReset()
        this.actProcessFormModel = { ...res.data[0] }
        this.actProcessDetailDrawerVisible = false
        this.actProcessEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartListDataSet: Array<ActProcessChartVO> = []

  actProcessChartListColumns: Array<object> = [
    {
      title: '流程图名称',
      dataIndex: 'processChartName',
      align: 'center',
      ellipsis: true,
      // width: 200,
    },
    {
      title: '流程版本',
      dataIndex: 'processVersions',
      align: 'center',
      // ellipsis: true,
      width: 100,
    },
    // {
    //   title: '部署Id',
    //   dataIndex: 'deploymentId',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
    // {
    //   title: '流程定义Id',
    //   dataIndex: 'processDefinitionId',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
    // {
    //   title: '流程图内容',
    //   dataIndex: 'processChartContent',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
    // {
    //   title: '外键Id',
    //   dataIndex: 'fkid',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
  ]

  actProcessChartListLoading: boolean = false

  actProcessChartListSelectedRowKeys: string[] = []

  actProcessChartListSelectData: Array<ActProcessChartVO> = []

  actProcessChartListSelectLength: number = 0

  actProcessChartListSelectCurrentRowIndex: number = -1

  actProcessChartListSelectCurrentRowData: ActProcessChartVO = toActProcessChartVO()

  actProcessChartListPaginationVisible: boolean = true

  actProcessChartListDataPage: number = 1

  actProcessChartListDataRows: number = 10

  actProcessChartListDataCount: number = 0

  actProcessChartListRowOnChange(selectedRowKeys, selectedRows) {
    this.actProcessChartListSelectedRowKeys = [ ...selectedRowKeys ]
    this.actProcessChartListSelectData = [ ...selectedRows ]
    this.actProcessChartListSelectLength = selectedRows.length
  }

  actProcessChartListCustomRow(record, index) {
    return {
      'class': index === this.actProcessChartListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.actProcessChartListSelectCurrentRowIndex = index
        this.actProcessChartListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.actProcessChartListSelectedRowKeys ]
        let selectedRows = [ ...this.actProcessChartListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.actProcessChartListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.actProcessChartListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.actProcessChartStore.pkVo(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartListSelectCurrentRowData.id } as ActProcessChartQO)).then((res: Res<ActProcessChartVO>) => {
          if (res.succ) {
            this.actProcessChartDetailModel = { ...res.data[0] }
            this.actProcessChartDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  actProcessChartListGetDataSet() {
    this.actProcessChartListLoading = true
    this.actProcessChartListRowOnChange([], [])
    this.actProcessChartListSelectCurrentRowIndex = -1
    this.actProcessChartListSelectCurrentRowData = toActProcessChartVO()
    this.actProcessChartStore.pagingVo(this.$toParam<ActProcessChartQO>([], this.actProcessChartListDataPage, this.actProcessChartListDataRows)).then((res: Res<ActProcessChartVO>) => {
      if (res.succ) {
        this.actProcessChartListPaginationVisible = true
        this.actProcessChartListDataSet = [ ...res.data ]
        this.actProcessChartListDataCount = res.count
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessChartListLoading = false }, 500)
    })
  }

  actProcessChartListPaginationChange() {
    this.actProcessChartListGetDataSet()
  }

  actProcessChartListPaginationShowSizeChange() {
    this.actProcessChartListGetDataSet()
  }

  actProcessChartFormQueryVisible: boolean = false

  actProcessChartFormQuerySubmitting: boolean = false

  actProcessChartFormQueryModel: ActProcessChartQO = toActProcessChartQO()

  actProcessChartFormQueryUpDown() {
    this.actProcessChartFormQueryVisible = !this.actProcessChartFormQueryVisible
  }

  actProcessChartFormQueryReset() {
    if (this.$refs.actProcessChartFormQueryRef) {
      this.$refs.actProcessChartFormQueryRef.resetFields()
      this.actProcessChartFormQueryModel = toActProcessChartQO()
    }
  }

  actProcessChartFormQuerySearch() {
    this.actProcessChartFormQuerySubmitting = true
    this.actProcessChartListLoading = true
    this.actProcessChartListRowOnChange([], [])
    this.actProcessChartListSelectCurrentRowIndex = -1
    this.actProcessChartListSelectCurrentRowData = toActProcessChartVO()
    if (this.actProcessListSelectCurrentRowData.id) {
      this.actProcessChartStore.queryVo(this.$toParam<ActProcessChartQO>(this.$toSearch({ ...this.actProcessChartFormQueryModel }))).then((res: Res<ActProcessChartVO>) => {
        if (res.succ) {
          this.actProcessChartListPaginationVisible = false
          this.actProcessChartListDataSet = [ ...res.data ]
          this.actProcessChartListDataCount = res.count
          setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
          setTimeout(() => { this.actProcessChartListLoading = false }, 500)
        } else {
          this.$message.error(res.msg, 6)
          setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
          setTimeout(() => { this.actProcessChartListLoading = false }, 500)
        }
      }).catch(err => {
        setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      })
    } else {
      this.actProcessChartListPaginationVisible = false
      this.actProcessChartListDataSet = []
      this.actProcessChartListDataCount = 0
      setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.actProcessChartListLoading = false }, 500)
    }
  }

  actProcessChartEditDrawerVisible: boolean = false

  actProcessChartFormSaveSubmitting: boolean = false

  actProcessChartFormSaveContinue: boolean = false

  actProcessChartFormModel: ActProcessChart = toActProcessChart()

  actProcessChartFormRules: object = {
    // processVersions: [
    //   { type: 'number', required: true, message: '流程版本不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processChartName: [
    //   { type: 'string', required: true, message: '流程图名称不能为空！', trigger: ['change', 'blur'] },
    // ],
    // deploymentId: [
    //   { type: 'string', required: true, message: '部署Id不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processDefinitionId: [
    //   { type: 'string', required: true, message: '流程定义Id不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processChartContent: [
    //   { type: 'string', required: true, message: '流程图内容不能为空！', trigger: ['change', 'blur'] },
    // ],
    // fkid: [
    //   { type: 'string', required: true, message: '外键Id不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  actProcessEditorHeight: string = '750px'

  actProcessEditorVisible: boolean = false

  actProcessChartEditDrawerTabsActiveKey: string = 'processEditor'

  actProcessChartXmlStr: string = ''

  actXmlEditorVisible: boolean = false

  actXmlStr: string = ''

  async actProcessChartEditDrawerTabsChange(activeKey) {
    if ('processEditor' === activeKey) {
      this.actProcessChartXmlStr = this.$refs.actXmlCodeEditorRef.editorView.state.doc.toString()
      this.$refs.actXmlCodeEditorRef.editorView.destroy()
      this.actXmlEditorVisible = false
      this.actProcessEditorVisible = true
    }
    if ('xmlEditor' === activeKey) {
      let { xml } = await this.$refs.actProcessEditorRef.bpmnModeler.saveXML({ format: true })
      this.actXmlStr = xml
      this.$refs.actProcessEditorRef.bpmnModeler.get('keyboard').unbind()
      this.actProcessEditorVisible = false
      this.actXmlEditorVisible = true
    }
  }

  actProcessChartFormReset() {
    if (this.$refs.actProcessChartFormRef) {
      this.$refs.actProcessChartFormRef.resetFields()
      this.actProcessChartFormModel = toActProcessChart()
    }
  }

  actProcessChartFormSubmit() {
    this.actProcessChartFormSaveSubmitting = true
    if (this.actProcessChartFormModel.id) {
      this.actProcessChartStore.update(this.$toParam<ActProcessChart>(this.actProcessChartFormModel)).then((res: Res<ActProcessChart>) => {
        if (res.succ) {
          this.$message.success(res.msg, 3)
          this.actProcessChartFormModel = toActProcessChart()
          this.actProcessChartXmlStr = ''
          this.actProcessChartFormSaveSubmitting = false
          if ('processEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
            this.$refs.actProcessEditorRef.bpmnModeler.get('keyboard').unbind()
            this.actProcessEditorVisible = false
          }
          if ('xmlEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
            this.$refs.actXmlCodeEditorRef.editorView.destroy()
            this.actXmlEditorVisible = false
          }
          this.actProcessChartEditDrawerVisible = false
          this.actProcessChartFormQuerySearch()
        } else {
          this.$message.error(res.msg, 6)
          setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
        }
      }).catch(err => {
        setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
      })
    } else {
      this.actProcessChartStore.save(this.$toParam<ActProcessChart>(this.actProcessChartFormModel)).then((res: Res<ActProcessChart>) => {
        if (res.succ) {
          this.$message.success(res.msg, 3)
          this.actProcessChartFormModel = toActProcessChart()
          this.actProcessChartXmlStr = ''
          this.actProcessChartFormSaveSubmitting = false
          if ('processEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
            this.$refs.actProcessEditorRef.bpmnModeler.get('keyboard').unbind()
            this.actProcessEditorVisible = false
          }
          if ('xmlEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
            this.$refs.actXmlCodeEditorRef.editorView.destroy()
            this.actXmlEditorVisible = false
          }
          this.actProcessChartEditDrawerVisible = false
          this.actProcessChartFormQuerySearch()
        } else {
          this.$message.error(res.msg, 6)
          setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
        }
      }).catch(err => {
        setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
      })
    }
  }

  async actProcessChartFormSave() {
    if ('processEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
      let { xml } = await this.$refs.actProcessEditorRef.bpmnModeler.saveXML({ format: true })
      this.actProcessChartFormModel.processChartContent = xml
      this.actProcessChartFormSubmit()
    }
    if ('xmlEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
      this.actProcessChartFormModel.processChartContent = this.$refs.actXmlCodeEditorRef.editorView.state.doc.toString()
      this.actProcessChartFormSubmit()
    }
  }

  actProcessChartFormNextAdd() {
    this.actProcessChartFormSaveContinue = true
    this.actProcessChartFormSubmit()
  }

  actProcessChartAdd() {
    this.actProcessEditorHeight = `${window.innerHeight - 153}px`
    this.actProcessChartXmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:activiti="http://activiti.org/bpmn" id="model-${this.$getUUID36()}" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="${this.actProcessListSelectCurrentRowData.processKey}" name="${this.actProcessListSelectCurrentRowData.processName}" isExecutable="true">
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${this.actProcessListSelectCurrentRowData.processKey}">
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>
`
    this.actProcessEditorVisible = true
    this.actProcessChartFormModel = toActProcessChart()
    this.actProcessChartFormModel.fkid = this.actProcessListSelectCurrentRowData.id
    this.actProcessChartEditDrawerTabsActiveKey = 'processEditor'
    this.actProcessChartEditDrawerVisible = true
  }

  actProcessChartUpdate() {
    this.actProcessChartStore.pk(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartListSelectData[0].id } as ActProcessChartQO)).then((res: Res<ActProcessChart>) => {
      if (res.succ) {
        this.actProcessChartFormModel = { ...res.data[0] }
        this.actProcessEditorHeight = `${window.innerHeight - 153}px`
        this.actProcessChartXmlStr = this.actProcessChartFormModel.processChartContent
        this.actProcessEditorVisible = true
        this.actProcessChartEditDrawerTabsActiveKey = 'processEditor'
        this.actProcessChartEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartEditDrawerOnClose() {
    if ('processEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
      this.$refs.actProcessEditorRef.bpmnModeler.get('keyboard').unbind()
      this.actProcessEditorVisible = false
    }
    if ('xmlEditor' === this.actProcessChartEditDrawerTabsActiveKey) {
      this.$refs.actXmlCodeEditorRef.editorView.destroy()
      this.actXmlEditorVisible = false
    }
  }

  actProcessChartEditStaffPostNexusDrawerVisible: boolean = false

  actProcessChartEditStaffPostNexusValue: string = ''

  actProcessChartEditStaffPostNexusSubmitting: boolean = false

  actProcessChartEditStaffPostNexusOrgPostTreeData: Array<CoreTree<any>> = []

  actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData: string[] = []

  actProcessChartEditStaffPostNexusOrgPostStaffTreeData: Array<CoreTree<any>> = []

  actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData: string[] = []

  actProcessChartEditStaffPostNexusDrawerHeight: string = '688px'

  actProcessChartEditStaffPostNexusChange(e) {
    this.actProcessChartEditStaffPostNexusOrgPostTreeData = []
    this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData = []
    this.actProcessChartEditStaffPostNexusOrgPostStaffTreeData = []
    this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData = []
    if ('staffNexus' === e.target.value) {
      this.orgStore.getOrgPostStaffTreeData(this.$toParam<OrgQO>({ weightOrderAsc: 'y' } as OrgQO)).then((res: Res<CoreTree<any>>) => {
        if (res.succ) {
          this.actProcessChartEditStaffPostNexusOrgPostStaffTreeData = [ ...res.data ]
          if (this.actProcessNodeDataStore.assignee) {
            this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData = this.actProcessNodeDataStore.assignee.split(',')
          } else {
            if (this.actProcessNodeDataStore.candidateUsers) {
              this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData = this.actProcessNodeDataStore.candidateUsers.split(',')
            }
          }
        } else {
          this.$message.error(res.msg, 6)
        }
      })
    }
    if ('postNexus' === e.target.value) {
      this.orgStore.getOrgPostTreeData(this.$toParam<OrgQO>({ weightOrderAsc: 'y' } as OrgQO)).then((res: Res<CoreTree<any>>) => {
        if (res.succ) {
          this.actProcessChartEditStaffPostNexusOrgPostTreeData = [ ...res.data ]
          if (this.actProcessNodeDataStore.candidateGroups) {
            this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData = this.actProcessNodeDataStore.candidateGroups.split(',')
          }
        } else {
          this.$message.error(res.msg, 6)
        }
      })
    }
  }

  actProcessChartEditStaffPostNexusClick() {
    this.actProcessChartEditStaffPostNexusSubmitting = true
    if (!this.actProcessChartEditStaffPostNexusValue) {
      this.$message.error('请关联员工或岗位！', 6)
      setTimeout(() => { this.actProcessChartEditStaffPostNexusSubmitting = false }, 3000)
      return
    }
    if ('staffNexus' === this.actProcessChartEditStaffPostNexusValue) {
      if (this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData.length === 0) {
        this.$message.error('未选择员工！', 6)
        setTimeout(() => { this.actProcessChartEditStaffPostNexusSubmitting = false }, 3000)
        return
      }
      if (this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData.length === 1) {
        this.$refs.actProcessEditorRef.bpmnModeler.get('modeling').updateProperties(this.$refs.actProcessEditorRef.bpmnModeler.get('elementRegistry').get(this.actProcessNodeStore.actProcessUserTaskNodeId), {
          assignee: this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData.join(','),
          candidateUsers: null,
          candidateGroups: null,
        })
      } else {
        this.$refs.actProcessEditorRef.bpmnModeler.get('modeling').updateProperties(this.$refs.actProcessEditorRef.bpmnModeler.get('elementRegistry').get(this.actProcessNodeStore.actProcessUserTaskNodeId), {
          assignee: null,
          candidateUsers: this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData.join(','),
          candidateGroups: null,
        })
      }
    }
    if ('postNexus' === this.actProcessChartEditStaffPostNexusValue) {
      if (this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData.length === 0) {
        this.$message.error('未选择岗位！', 6)
        setTimeout(() => { this.actProcessChartEditStaffPostNexusSubmitting = false }, 3000)
        return
      }
      this.$refs.actProcessEditorRef.bpmnModeler.get('modeling').updateProperties(this.$refs.actProcessEditorRef.bpmnModeler.get('elementRegistry').get(this.actProcessNodeStore.actProcessUserTaskNodeId), {
        assignee: null,
        candidateUsers: null,
        candidateGroups: this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData.join(','),
      })
    }
    this.actProcessChartEditStaffPostNexusDrawerVisible = false
    this.actProcessChartEditStaffPostNexusSubmitting = false
    this.actProcessChartEditStaffPostNexusValue = ''
    this.actProcessChartEditStaffPostNexusOrgPostTreeData = []
    this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData = []
    this.actProcessChartEditStaffPostNexusOrgPostStaffTreeData = []
    this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData = []
    this.actProcessNodeStore.setActProcessUserTaskNodeId('')
  }

  actProcessChartEditStaffPostNexusDrawerOnClose() {
    this.actProcessChartEditStaffPostNexusValue = ''
    this.actProcessChartEditStaffPostNexusOrgPostTreeData = []
    this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData = []
    this.actProcessChartEditStaffPostNexusOrgPostStaffTreeData = []
    this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData = []
    this.actProcessNodeStore.setActProcessUserTaskNodeId('')
  }

  actProcessChartDelete() {
    let param: Array<ActProcessChart> = []
    this.actProcessChartListSelectData.forEach((eo: ActProcessChartVO) => {
      param.push({ id: eo.id } as ActProcessChart)
    })
    this.actProcessChartStore.removeBatch(this.$toParam<ActProcessChart>(param)).then((res: Res<ActProcessChart>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.actProcessChartListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartChangeDefaultProcess() {
    this.actProcessStore.pk(this.$toParam<ActProcessQO>({ id: this.actProcessChartListSelectData[0].fkid } as ActProcessQO)).then((res: Res<ActProcess>) => {
      if (res.succ) {
        this.actProcessStore.update(this.$toParam<ActProcess>({ ...res.data[0], ...{ defaultProcessVersions: this.actProcessChartListSelectData[0].processVersions } })).then((res: Res<ActProcess>) => {
          if (res.succ) {
            this.$message.success('默认流程设置成功！', 3)
            this.actProcessListGetDataSet()
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartDetailDrawerVisible: boolean = false

  actProcessChartDetailModel: ActProcessChartVO = toActProcessChartVO()

  actProcessChartDetailInfo() {
    this.actProcessChartStore.pkVo(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartListSelectData[0].id } as ActProcessChartQO)).then((res: Res<ActProcessChartVO>) => {
      if (res.succ) {
        this.actProcessChartDetailModel = { ...res.data[0] }
        this.actProcessChartDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartDetailUpdate() {
    this.actProcessChartStore.pk(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartDetailModel.id } as ActProcessChartQO)).then((res: Res<ActProcessChart>) => {
      if (res.succ) {
        this.actProcessChartFormReset()
        this.actProcessChartFormModel = { ...res.data[0] }
        this.actProcessChartDetailDrawerVisible = false
        this.actProcessChartEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.actProcessChartFormQueryModel.processVersionsAsc = 'y'
    this.actProcessListGetDataSet()
    this.actProcessNodeStore.$subscribe((mutation, state) => {
      if (state.actProcessUserTaskNodeId) {
        this.actProcessChartEditStaffPostNexusDrawerHeight = `${window.innerHeight - 240}px`
        this.actProcessChartEditStaffPostNexusValue = ''
        this.actProcessChartEditStaffPostNexusOrgPostTreeData = []
        this.actProcessChartEditStaffPostNexusOrgPostTreeCurrentSelectData = []
        this.actProcessChartEditStaffPostNexusOrgPostStaffTreeData = []
        this.actProcessChartEditStaffPostNexusOrgPostStaffTreeCurrentSelectData = []
        this.actProcessChartEditStaffPostNexusDrawerVisible = true
      }
    })
  }

}
</script>

<style scoped lang="less">

</style>
